// less引入一个变量系统
@color:lightblue;
@width: 300px;
@height: 200px;

body {
    background-color: @color;
}

div {
    width: @width;
    height: @height;
    background-color: @color;
}

// less中实现了语法的嵌套结构，从而 让开发的时候 更加容易实现结构的管理
.main {
    width: @width;
    height: @height;
    background-color: red;

    &:hover {
        background-color: orange;
    }

    &::after {
        content: '';
        display: block;
        width: 100px;
        height: 100px;
        background-color: violet;
    }

    &.primary {
        color: orange;
    }

    .father {
        width: 80%;
        height: 200px;
        background-color: blue;

        .son {
            width: 50%;
            height: 100px;
            background-color: green;
        }
    }
}

// less中的运算

.primary {
    width: (@width / 2 + 10);
    // height: 100px + 20rem;
    // height: calc(100px  + 20rem)
    height: 100px / 2;
}